<template>
<div id="app">
  <div class="wapTip" v-if="showWapTip">
    <img class="tiplogo" src="./assets/logo.png">
    <span>本工具仅个人业余制作使用，暂无精力维护手机版本，请使用电脑浏览~</span>
  </div>
  <div class="fixTop">
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <img class="main_logo" src="./assets/logo.png">
      </el-col>
      <el-col :span="18" class="main_title">
        广寒のTBC小工具（暂定名）
      </el-col>
    </el-row>
  </div>
  <div class="fixLeft">
    <el-menu default-active="3" class="el-menu-vertical" @select="handleMenuSelect"
    background-color=""
    text-color="#fff"
    active-text-color="#409EFF">
      <el-menu-item index="3" v-if="jsonData">
        <template slot="title">
          <i class="iconfont">&#xe6e3;</i>
          <span>金团表格</span>
        </template>
      </el-menu-item>
      <el-submenu index="1" v-if="jsonData">
        <template slot="title">
          <i class="iconfont">&#xe61c;</i>
          <span>5人副本</span>
        </template>
        <el-menu-item-group v-for="(item1,key1) in jsonData.fbGroup1" :key="'key1'+item1" :title="key1">
          <el-menu-item v-for="(item2) in item1" :key="'key2'+item2" :index="item2">{{jsonData.fbName[item2]}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2" v-if="jsonData">
        <template slot="title">
          <i class="iconfont">&#xe6ac;</i>
          <span>团队副本</span>
        </template>
        <el-menu-item-group v-for="(item1,key1) in jsonData.fbGroup2" :key="'key3'+item1" :title="key1">
          <el-menu-item v-for="(item2) in item1" :key="'key4'+item2" :index="item2">{{jsonData.fbName[item2]}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
  <goldHelper v-if="fbIndex == 3" style="display:inline-block;width:80%;float:left;margin-left:30px;margin-top:80px;" />
  <div v-else class="fixRight">
    <log v-if="!fbIndex" />
    <fbPage v-else :index="fbIndex" />
  </div>

</div>
</template>

<script>
import fbPage from './components/fbPage.vue'
import goldHelper from './components/goldHelper.vue'
import log from './components/log.vue'
let Datas = require('./assets/datas.json')

export default {
  name: 'App',
  components: {
    fbPage,
    goldHelper,
    log
  },
  data() {
    return {
      showWapTip: false,
      fbIndex: '3',
      jsonData: null
    }
  },
  mounted() {
    this.jsonData = Datas
    if (window.screen.availWidth <=800) {
      this.showWapTip = true
    }
  },
  methods: {
    handleMenuSelect(key, keyPath) {
      console.log(key, keyPath)
      this.fbIndex = key
    }
  }
}
</script>

<style>
:root {
  --LINKCOLOR: #409EFF;
}
@font-face {
  font-family: 'iconfont';  /* Project id 2402837 */
  src: url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.woff2?t=1623053231740') format('woff2'),
       url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.woff?t=1623053231740') format('woff'),
       url('//at.alicdn.com/t/font_2402837_x2nonlzfj5a.ttf?t=1623053231740') format('truetype');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
#app {background-color: #394656;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;width: 100%;min-height: 100%;}
a:link,a:hover,a:visited,a:focus{color: var(--LINKCOLOR);text-decoration: none;}

.wapTip{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100;background-color: #394656;display: flex;align-items: center;justify-content: center;color: #fff;box-sizing: border-box;padding-left: 30px;padding-right: 30px;font-size: 24px;flex-direction: column;}
.tiplogo{width: 80%;display: block;margin-bottom: 20px;}
.wapTip span{display: block;}

.main_logo {height: 50px;display: inline-block;margin-top: 15px;margin-left: 30px;}
.main_title {color: #fff;font-size: 28px;height: 80px;line-height: 80px;font-weight: 600;}
.el-menu{background-color: inherit;}
.el-menu-vertical{border-right: 0;background-color: inherit;}
.el-menu-vertical .el-menu-item-group__title{color: #8bda34}
.el-submenu__title:hover{background-color: inherit;}
.el-menu-vertical .el-menu-item:focus, .el-menu-item:hover{background-color: #4e5967;color: var(--LINKCOLOR) !important}
.grid-content{}
.el-submenu__title i,.el-menu-item i{color: #fff;}
.el-submenu__title i.iconfont,.el-menu-item i.iconfont{margin-right: 3px;}
.fixTop{width: 100%;position: fixed;left: 0;top: 0;z-index: 3;background-color: #394656;}
.fixLeft{width: 16%;display: inline-block;margin-top: 80px;position: relative;z-index: 2;float: left;}
.fixRight{width: 100%;padding-left: 18%;padding-right: 15px;position: fixed;box-sizing: border-box;top: 80px;left: 0;z-index: 1;}
</style>
